<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>西南大学网上购物商城</title>
  </head>
  <body>
    <div class="box">
      <div class="clientloginBox" id="client">
        <div class="textBox">
          <span>登录</span>
          <span id="adminLogin">管理员登录</span>
        </div>
        <form method="post" action="./clientLogin">
          <div class="inpBox">
            <img src="./img/user.png" alt="">
            <input id="userName" type="text" placeholder="请输入用户名" name="user">
          </div>
          <div class="inpBox">
            <img src="./img/password.png" alt="">
            <input id="passwordVal" type="password" placeholder="请输入用户密码" name="pass">
          </div>
          <div class="textBox2">
<!--            <span>验证码登录</span>-->
            验证：<input type="text" style="width:70px" name="code"><img style="margin-left: 5px;"  src="./vericode" /><br><br>
          </div>
          <div style="text-align:center"><input type="submit" value="登 录 " class="btnBox" style="width:250px"></div>
        </form>
        <div style="color: #FF5300;">没有账号？点击<a href="register.html" id="register" style="color:white;">注册</a></div>
      </div>

      <div class="adminloginBox" id="admin">
        <div class="textBox">
          <span>登录</span>  
          <span id="clientLogin">用户登录</span>
          <br><br>
          <p>初始化管理员名：slxc</p>
          <p>初始化密码：182340</p>
        </div>
        <form method="post" action="./adminLogin">
          <div class="inpBox">
            <img src="./img/user.png" alt="">
            <input id="adminName" type="text" placeholder="请输入管理员名" name="user">
          </div>
          <div class="inpBox">
            <img src="./img/password.png" alt="">
            <input id="adminpasswordVal" type="password" placeholder="请输入管理员密码" name="pass">
          </div>
          <div class="textBox2">
<!--            <span>验证码登录</span>-->
            验证：<input type="text" name="code" style="width:70px"><img src="./vericode" style="margin-left:5px"/><br><br>
          </div>
          <div style="text-align:center"><input type="submit" value="登 录 " class="btnBox" style="width:250px"></div>
        </form>
      </div>
    </div>
  </body>

  <style>
    *
    {
      margin:0;
      padding:0;
    }

    .textBox>p
    {
      color: #FF5300;
    }

    .box
    {
      width:100%;
      height:100vh;
      background-image: url('./img/datubanner.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .clientloginBox
    {
      background-color:rgba(255, 255, 255, 0.6);
      width:250px;
      height:300px;
      padding:25px 15px;
      position: absolute;
      right:100px;
<!--      top: calc(50% - 170px);-->
      /* x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 */
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.6);
      top:50%;
      left:50%;
      transform:translate(-50%,-50%)
    }

    .adminloginBox
    {
      background-color:rgba(255, 255, 255, 0.6);
      width:250px;
      height:300px;
      padding:25px 15px;
      position: absolute;
      right:100px;
<!--      top: calc(50% - 170px);-->
      /* x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 */
      box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.6);
      top:50%;
      left:50%;
      transform:translate(-50%,-50%)
    }

    .textBox
    {
      margin-bottom:20px;
    }

    .textBox :nth-child(1)
    {
      color:#FF5300;
      font-size: 20px;
    }

    .textBox :nth-child(2)
    {
      color:#b1b1b1;
      /* font-size: 12px; */
    }

    .inpBox
    {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: white;
      border-radius: 25px;
      padding:5px;
      margin-bottom: 15px;
    }

    .inpBox img
    {
      margin-right:10px;
    }

    .inpBox input
    {
      border: none;
      outline: none;
    }

    .textBox2
    {
      display: flex;
<!--      justify-content: space-between;-->
      align-items: center;
      color:#FF5300;
      height:20px;
    }

    .textBox2 span
    {
      border-bottom: 1px solid #FF5300;
      cursor: pointer;
    }

    .btnBox
    {
      padding:10px;
      font-size: 14px;
      background: #FF5300;
      color:white;
      text-align: center;
      border-radius: 25px;
      margin-top:20px;
      cursor: pointer;
      border:0;
    }

    .btnBox2
    {
      width:50px;
      text-align: center;
      margin: 10px auto;
      color:#4e4e4e;
      font-size: 12px;
      cursor: pointer;
      border-bottom: 1px solid #4e4e4e;
    }

    .textBox3
    {
      font-size: 20px;
      color:white;
      position:absolute;
      bottom: 50px;
      left:50px;
    }

    #adminLogin
    {
      color:#FF5300;
      float:right;
    }

    #adminLogin:hover
    {
      color:black;
      cursor: pointer;
      text-decoration: underline;
    }

    #clientLogin
    {
      color:red;
      float:right;
    }

    #clientLogin:hover
    {
      color:black;
      cursor: pointer;
      text-decoration: underline;
    }

    /* .adminloginBox
    {
      display: none;
    } */

    .none
    {
      display: none;
    }

  </style>


  <script>

    let clientloginBox = document.querySelector(".clientloginBox")
    let adminloginBox = document.querySelector(".adminloginBox")
    let clientLogin = document.querySelector("#clientLogin")
    let adminLogin = document.querySelector("#adminLogin")

    console.log(clientLogin)

    adminloginBox.classList.add("none")

    clientLogin.addEventListener("click",function(){
      adminloginBox.classList.add("none")
      clientloginBox.classList.remove("none")
    })

    adminLogin.addEventListener("click",function(){
      adminloginBox.classList.remove("none")
      clientloginBox.classList.add("none")
    })


  </script>

</html>
